import {
	Button,
	Collapse,
	Form,
	Row,
	Col,
	Input,
	Select,
	Upload,
	TreeSelect,
	message,
	DatePicker,
	Tag,
	Tabs,
} from 'antd'
import React, {useState, useEffect, memo, useRef} from 'react'
import {history, connect} from 'umi'

import moment from 'moment'
import CustomTable from '@/components/Table'
import styles from './index.less'
import {getAllSupplierAccessList} from '@/service/supplier/supplierAccess'
import {getIsProcessOpen} from '@/service/purchase/initiation'
import {dictByCode, getAllApplyList} from '@/service/purchase/apply'

import {getDict} from '@/service/common/dict'
import {getBusinessCode} from '@/service/purchase/common'
import {getTablePage} from '@/service/purchase/payment'
import 'moment/locale/zh-cn'
import {
	addContract,
	contractAuditFlow,
	contractProcessAdd,
	contractRelaunchFlow,
	contractSaveTemporary,
	editContract,
	viewContract,
} from '@/service/purchase/contract'

import {twoDecimalPattern} from '@/utils/common/validator'
import {uploadMoreProps, getPublicDownloadUrl} from '@/service/common/upload'
import {getCompany, processRecordSave} from '@/service/common/index'
import {translateDataToTree} from '@/utils/common/index'
import {auditStatus} from '../../dict'
import Examine from '@/components/Examine'
import OperationRecord from '@/components/OperationRecord'

const {Panel} = Collapse
const {TextArea} = Input
const {RangePicker} = DatePicker
type TreeItem = {
	id: string
	parentId: number
	name: string
	children?: Array<TreeItem>
}[]

type OtherParams = {
	applicantId?: string
	requisitionName?: string
	requisitionOrgname?: string
	purchaserName?: string
	contractTypename?: string
	supplierId?: string
	supplierName?: string
	supplierNo?: string
	startTime?: string
	finishTime?: string
}

const add = memo(
	(props: {
		global: {currentRoute: any}
		dispatch: any
		user: {userId: string; userName: string; orgId: string | number}
		location: any
	}) => {
		const {dispatch} = props
		const {currentRoute} = props.global
		const [contractId, setContractId] = useState<string>()
		const [requisitionId, setRequisitionId] = useState<string>()

		const [type, setType] = useState<string>()
		const [form] = Form.useForm()
		const [supplierForm] = Form.useForm()
		const [otherParams, setOtherParams] = useState<OtherParams>()
		const [dict, setDict] = useState({
			category: [],
			purchase_costs_type: [],
			purchase_contract_type: [],
		})
		const [orgList, setOrgList] = useState<TreeItem>([])

		const [fileList, setFileList] = useState<any>([])
		const [params, setParams] = useState({
			current: 1,
			size: 10,
		})

		// 供应商列表
		const [supplierList, setSupplierList] = useState([])
		// 供应商详情列表
		const [supplierView, setSupplierView] = useState<any[]>([])
		const [applyList, setApplyList] = useState<any[]>([])
		const [paymentrView, setPaymentrView] = useState<any[]>([])
		const [amount, setAmount] = useState<any>(0)
		const [taxRate, setTaxRate] = useState<any>(0)
		const [requisitionTypeList, setRequisitionTypeList] = useState<any[]>(
			[],
		)
		const examineRef = useRef<any>(null)
		// 流程id
		const [instanceId, setInstanceId] = useState<string>()
		const [processOpen, setProcessOpen] = useState<number>(0)
		const [getAuditStatus, setAuditStatus] = useState<string>('0')
		const [newApplyTime, setNewApplyTime] = useState('')
		const supplierColumns = [
			{
				title: '供应商编号',
				dataIndex: 'supplierCode',
				editable: true,
				align: 'center',
				width: 200,
				render: (text: any, record: any) => (
					<>
						{text ? (
							<Button
								type="link"
								size="small"
								onClick={() => {
									history.push({
										pathname: '/supplier/admittance/view',
										query: {
											id: record?.id,
										},
									})
								}}>
								{text}
							</Button>
						) : (
							'--'
						)}
					</>
				),
			},
			{
				title: '供应商名称',
				dataIndex: 'supplierName',
				editable: true,
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '供应商所属公司',
				dataIndex: 'orgId',
				editable: true,
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '供应商类型',
				dataIndex: 'supplierType',
				editable: true,
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '合同数量',
				dataIndex: 'contractNum',
				editable: true,
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text}</span>,
			},
			{
				title: '供应商联系人/电话',
				dataIndex: 'contactPhone',
				editable: true,
				align: 'center',
				width: 200,
				render: (text: string) => <span>{text || '--'}</span>,
			},
		]
		const paymentColumns = [
			{
				title: '付款申请单编号',
				dataIndex: 'applypayNo',
				width: 200,
				align: 'center',
				render: (text: any, record: any) => (
					<>
						{text ? (
							<Button
								type="link"
								size="small"
								onClick={() => {
									const {id} = props.location.query
									history.push({
										pathname: '/purchase/payment/view',
										query: {
											id: record?.id,
											goPath: props.location.pathname,
											pathParams: id,
										},
									})
								}}>
								{text}
							</Button>
						) : (
							'--'
						)}
					</>
				),
			},
			{
				title: '审核状态',
				dataIndex: 'auditStatus',
				width: 100,
				align: 'center',
				render: (text: number, record: any) => (
					<>
						{auditStatus?.map(
							(item: {key: number; label: string}) => {
								if (item?.key === Number(text)) {
									return (
										<Tag
											color="processing"
											key={record?.id}>
											{item?.label}
										</Tag>
									)
								}
								return null
							},
						)}
					</>
				),
			},
			{
				title: '关联采购计划申请单编号',
				dataIndex: 'planNo',
				width: 200,
				align: 'center',
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '付款类型',
				dataIndex: 'payMethodname',
				width: 100,
				align: 'center',
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '付款金额',
				dataIndex: 'amount',
				width: 100,
				align: 'center',
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '申请人',
				dataIndex: 'applicantName',
				width: 100,
				align: 'center',
				render: (text: string) => <span>{text || '--'}</span>,
			},
			{
				title: '申请时间',
				dataIndex: 'applyTime',
				width: 200,
				align: 'center',
				render: (text: string) => <span>{text || '--'}</span>,
			},
		]
		const goback = () => {
			const {goPath, pathParams} = props.location.query
			dispatch({
				type: 'global/deleteTabs',
				payload: currentRoute,
			})
			if (goPath) {
				if (pathParams) {
					history.push({
						pathname: goPath,
						query: {
							id: pathParams,
						},
					})
				} else {
					history.push({
						pathname: goPath,
					})
				}
			} else {
				history.push({
					pathname: '/purchase/contract',
				})
			}
		}

		// 初始化-流程是否激活
		const getIsProcessOpenFun = () => {
			getIsProcessOpen({businessType: 3})
				.then((res: any) => {
					if (res?.success) {
						setProcessOpen(() => res?.data)
					}
				})
				.catch((err: any) => {
					message.error(err)
				})
		}

		// 初始化-项目编码
		const onCodeFun = () => {
			getBusinessCode({businessType: 3})
				.then((res: any) => {
					if (res?.success) {
						form.setFieldsValue({contractNo: res?.data})
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}
		// 初始化-采购类目
		const onDictByCodeFun = () => {
			dictByCode('purchase_requisition_type')
				.then((res: any) => {
					if (res?.success) {
						setRequisitionTypeList(() => res?.data)
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}
		// 获取公司数据
		const onAllCompany = () => {
			getCompany({merchantId: props?.user?.orgId}).then((res: any) => {
				if (res?.success) {
					const list = translateDataToTree(res.data)
					setOrgList(() => list as any)
				}
			})
		}
		useEffect(() => {
			onAllCompany()
			onDictByCodeFun()
		}, [props?.user?.orgId])

		// 付款申请分页列表
		const onAllApplyPay = (contractNo: any) => {
			getTablePage({contractNo}).then((res: any) => {
				if (res?.success) {
					setPaymentrView(() => res?.data)
				}
			})
		}

		// 初始化-采购申请单号
		const getApplyListFun = () => {
			getAllApplyList({id: requisitionId}).then((res: any) => {
				if (res?.success) {
					setApplyList(res?.data)
				}
			})
		}

		// 获取供应商列表
		const getAccessList = () => {
			getAllSupplierAccessList()
				.then((res: any) => {
					if (res?.success) {
						setSupplierList(() => res?.data)
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}

		// 获取供应商详情
		const getSupplierView = (supplierId: string) => {
			getAllSupplierAccessList()
				.then((res: any) => {
					if (res?.success) {
						const data = res?.data?.filter(
							(item: any) =>
								supplierId.toString() === item?.id?.toString(),
						)
						setSupplierView(() => data)
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}

		// 初始化-附件列表
		const getFileList = (ids: any) => {
			getPublicDownloadUrl(ids).then((res: any) => {
				if (res?.success) {
					const list = res?.data.map((item: any) => ({
						name: item?.filename,
						status: 'done',
						url: item?.url,
						response: {
							data: {
								id: item?.id,
							},
						},
					}))
					setFileList(() => [...list])
				}
			})
		}

		// 初始化-详情数据
		const getView = (id: string) => {
			viewContract(id).then((res: any) => {
				if (res.success && res?.data) {
					setInstanceId(res?.data?.instanceId)
					setAuditStatus(res?.data?.auditStatus)
					setNewApplyTime(res?.data?.applyTime)
					form.setFieldsValue({
						...res?.data,
						contractTime: [
							moment(res?.data.startTime),
							moment(res?.data.finishTime),
						],
						applyTime: res?.data?.applyTime
							? moment(res?.data?.applyTime)
							: null,
					})
					setAmount(() => res?.data?.amount)
					setTaxRate(() => res?.data?.taxRate)
					setRequisitionId(() => res?.data?.requisitionId)
					setOtherParams({
						...otherParams,
						applicantId: res?.data?.applicantId,
						requisitionName: res?.data?.requisitionName,
						requisitionOrgname: res?.data?.requisitionOrgname,
						purchaserName: res?.data?.purchaserName,
						contractTypename: res?.data?.contractTypename,
						supplierId: res?.data?.supplierId,
						supplierName: res?.data?.supplierName,
						supplierNo: res?.data?.supplierNo,
						startTime: res?.data?.startTime,
						finishTime: res?.data?.finishTime,
					})

					getSupplierView(res?.data?.supplierId)
					onAllApplyPay(res?.data?.contractNo)
					if (res?.data?.attachmentList?.length) {
						getFileList(res?.data?.attachmentList)
					}
				}
			})
		}
		useEffect(() => {
			if (newApplyTime) {
				if (
					getAuditStatus &&
					getAuditStatus === '4' &&
					window.location.href.includes('edit') &&
					processOpen === 1
				) {
					form.setFieldsValue({
						applyTime: moment(
							moment().format('YYYY-MM-DD HH:mm:ss'),
						),
					})
				} else {
					form.setFieldsValue({
						applyTime: moment(newApplyTime),
					})
				}
			}
		}, [getAuditStatus, processOpen, newApplyTime])

		useEffect(() => {
			getAccessList()
		}, [])
		useEffect(() => {
			getApplyListFun()
		}, [requisitionId])
		// 根据路由判断当前页面状态
		useEffect(() => {
			const {id} = props.location.query
			setContractId(() => id)
			const hrefs = window.location.href
			getIsProcessOpenFun()
			if (hrefs.includes('view')) {
				setType('view')
			} else if (hrefs.includes('add')) {
				onCodeFun()
				setType('add')
				form.setFieldsValue({
					applicantName: props?.user?.userName,
					applyTime: moment(moment().format('YYYY-MM-DD HH:mm:ss')),
				})
				setOtherParams({
					...otherParams,
					applicantId: props?.user?.userId,
				})
			} else if (hrefs.includes('edit')) {
				setType('edit')
			} else {
				setType('process')
			}

			getDict(
				{
					dictKeys: [
						'category',
						'purchase_costs_type',
						'purchase_contract_type',
					],
				},
				(res: any) => {
					setDict(res)
				},
			)
			if (contractId) {
				getView(contractId)
			}
		}, [contractId, type])

		const customizeHeader = (value: string) => (
			<div>
				<div className={styles.tip} />
				{value}
			</div>
		)
		const submit = async (btnType: string) => {
			const {id} = props.location.query
			const formData = await form.validateFields()
			const supplierFormData = await supplierForm.validateFields()
			const applyTime = moment(formData?.applyTime).format(
				'YYYY-MM-DD HH:mm:ss',
			)
			// 附件处理
			const attachmentList = formData?.attachmentList?.fileList?.map(
				(item: any) => Number(item?.response?.data?.id),
			)
			let request
			if (btnType === 'submit') {
				if (getAuditStatus === '9' || !id) {
					const queryData = {
						...formData,
						...supplierFormData,
						...otherParams,
						applyTime,
						attachmentList: attachmentList || [],
					}
					if (id) {
						queryData.id = id
					}
					if (processOpen === 1) {
						// 流程自动发起
						request = contractProcessAdd(queryData)
					} else {
						// 流程未开启默认新增
						request = addContract(queryData)
					}
				} else if (processOpen === 1 && getAuditStatus === '4') {
					request = contractRelaunchFlow(id, {
						...formData,
						...supplierFormData,
						...otherParams,
						applyTime,
						attachmentList: attachmentList || [],
					})
				} else {
					request = editContract(id, {
						...formData,
						...supplierFormData,
						...otherParams,
						applyTime,
						attachmentList: attachmentList || [],
					})
				}
			}
			if (btnType === 'save') {
				const queryData = {
					...formData,
					...supplierFormData,
					...otherParams,
					applyTime,
					attachmentList: attachmentList || [],
				}
				if (id) {
					queryData.id = id
				}
				request = contractSaveTemporary(queryData)
			}
			request
				?.then((res) => {
					if (res?.success) {
						message.success(res.msg)
						goback()
					}
				})
				.catch((err) => {
					message.error(err)
				})
		}

		// 采购类目变化
		const onRequisitionTypeChange = (value: string, option: any) => {
			setOtherParams({...otherParams, requisitionName: option[0]})
		}

		// 需求组织变化
		const onRequisitionOrgChange = (value: string, option: any) => {
			setOtherParams({...otherParams, requisitionOrgname: option[0]})
		}

		// 采购方变化
		const onPurchaserChange = (value: string, option: any) => {
			setOtherParams({...otherParams, purchaserName: option[0]})
		}

		// 合同性质变化
		const onContractTypeChange = (value: string, option: any) => {
			setOtherParams({
				...otherParams,
				contractTypename: option?.dictValue,
			})
		}

		// 合同起止时间
		const onContractTimeChange = (value: any) => {
			setOtherParams({
				...otherParams,
				startTime: moment(value[0]).format('YYYY-MM-DD'),
				finishTime: moment(value[1]).format('YYYY-MM-DD'),
			})
		}

		// 供应商变化
		const onAccessListChange = (value: string, option: any) => {
			setOtherParams({
				...otherParams,
				supplierId: option?.id,
				supplierName: option?.supplierName,
				supplierNo: option?.supplierCode,
			})
			setSupplierView([option])
		}

		/** 审核 */
		const onCompleteTask = async (pass: string) => {
			const examineData = await examineRef.current.getData()
			if (examineData?.url) {
				const flowParams = {
					message: examineData?.message,
					businessId: props.location.query?.id,
					instanceId,
					pass,
					attachmentList: examineData?.url?.split(','),
				}
				if (pass === '3') {
					flowParams.message = JSON.stringify(examineData)
				}
				contractAuditFlow(flowParams)
					.then((res: {msg: string; success: boolean}) => {
						if (res?.success) {
							if (pass === '3') {
								processRecordSave({
									bizType: 3,
									bizNo: props?.location?.query?.id,
									processId: instanceId,
								})
							}
							message.success(res.msg)
							goback()
						}
					})
					.catch((err: any) => {
						message.error(err)
					})
			} else {
				message.warning('请上传附件')
			}
		}
		return (
			<div className={styles.admittanceAdd}>
				<div className={`${styles.content} ${styles.formDetils}`}>
					{instanceId && (type === 'view' || type === 'process') ? (
						<Examine
							ref={examineRef}
							examineType={type === 'process'}
							orgId={props?.user?.orgId}
							processInstanceId={instanceId}
							required
							bizType={3}
							bizNo={props?.location?.query?.id}
						/>
					) : (
						''
					)}
					<Collapse
						defaultActiveKey={['1', '2']}
						ghost
						expandIconPosition="end">
						<Panel header={customizeHeader('基础信息')} key="1">
							<Form
								form={form}
								name="basic"
								layout="horizontal"
								labelCol={{flex: '120px'}}
								labelAlign="right"
								labelWrap
								initialValues={{remember: true}}
								autoComplete="off">
								<Row gutter={12}>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="合同编号"
											name="contractNo"
											rules={[{required: true}]}>
											<Input
												placeholder="请输入"
												disabled
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="采购类目"
											name="requisitionType"
											rules={[{required: true}]}>
											<TreeSelect
												showSearch
												treeNodeFilterProp="dictValue"
												placeholder="请选择"
												style={{width: '100%'}}
												fieldNames={{
													value: 'key',
													children: 'childList',
													label: 'value',
												}}
												treeData={[
													...requisitionTypeList,
												]}
												onChange={
													onRequisitionTypeChange
												}
												disabled={
													type === 'view' ||
													type === 'process'
												}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="需求组织"
											name="requisitionOrgid"
											rules={[{required: true}]}>
											<TreeSelect
												showSearch
												treeNodeFilterProp="name"
												style={{width: '100%'}}
												placeholder="请选择"
												fieldNames={{
													label: 'name',
													value: 'id',
												}}
												treeDefaultExpandAll
												treeData={orgList}
												onChange={
													onRequisitionOrgChange
												}
												disabled={
													type === 'view' ||
													type === 'process'
												}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="合同名称"
											name="contractName"
											rules={[{required: true}]}>
											<Input
												placeholder="请输入"
												disabled={
													type === 'view' ||
													type === 'process'
												}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="采购方"
											name="purchaserId"
											rules={[{required: true}]}>
											<TreeSelect
												showSearch
												treeNodeFilterProp="name"
												style={{width: '100%'}}
												placeholder="请选择"
												fieldNames={{
													label: 'name',
													value: 'id',
												}}
												treeDefaultExpandAll
												treeData={orgList}
												onChange={onPurchaserChange}
												disabled={
													type === 'view' ||
													type === 'process'
												}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="合同性质"
											name="contractType"
											rules={[{required: true}]}>
											<Select
												showSearch
												placeholder="请选择"
												optionFilterProp="dictValue"
												options={
													dict.purchase_contract_type
												}
												fieldNames={{
													label: 'dictValue',
													value: 'dictKey',
												}}
												onChange={onContractTypeChange}
												disabled={
													type === 'view' ||
													type === 'process'
												}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="合同金额"
											name="amount"
											getValueFromEvent={
												(event: any) =>
													event.target.value.replace(
														/^(-)*(\d+)\.(\d\d).*$/,
														'$1$2.$3',
													) // 只能输入两位小数
											}
											rules={[
												{
													required: true,
													pattern: twoDecimalPattern,
													message:
														'请输入正确的合同金额',
												},
											]}>
											{type === 'view' ||
											type === 'process' ? (
												<>
													<span>{amount}元</span>
												</>
											) : (
												<Input
													placeholder="请输入"
													suffix="元"
												/>
											)}
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="采购申请单号"
											name="requisitionId"
											rules={[{required: true}]}>
											<Select
												showSearch
												optionFilterProp="requisitionNo"
												placeholder="请选择"
												options={applyList}
												fieldNames={{
													label: 'requisitionNo',
													value: 'id',
												}}
												disabled={
													type === 'view' ||
													type === 'process'
												}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="合同起止时间"
											name="contractTime"
											rules={[{required: true}]}>
											<RangePicker
												onChange={onContractTimeChange}
												format="YYYY-MM-DD"
												disabled={
													type === 'view' ||
													type === 'process'
												}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="税率"
											name="taxRate"
											getValueFromEvent={
												(event: any) =>
													event.target.value.replace(
														/^(-)*(\d+)\.(\d\d).*$/,
														'$1$2.$3',
													) // 只能输入两位小数
											}
											rules={[
												{
													required: true,
													pattern: twoDecimalPattern,
													message: '请输入正确的税率',
												},
											]}>
											{type === 'view' ||
											type === 'process' ? (
												<>
													<span>{taxRate}%</span>
												</>
											) : (
												<Input
													placeholder="请输入"
													suffix="%"
													disabled={
														type === 'view' ||
														type === 'process'
													}
												/>
											)}
										</Form.Item>
									</Col>
									<Col sm={{span: 24}} />
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="采购合同描述"
											name="remark"
											rules={[{required: true}]}>
											<TextArea
												maxLength={100}
												placeholder="请输入（最多100个字）"
												autoSize={{
													minRows: 3,
													maxRows: 6,
												}}
												disabled={
													type === 'view' ||
													type === 'process'
												}
											/>
										</Form.Item>
									</Col>
									<Col sm={{span: 24}} />
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="申请人"
											name="applicantName">
											<Input
												placeholder="请输入"
												disabled
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="申请时间"
											name="applyTime">
											{processOpen === 1 ? (
												<DatePicker
													format="YYYY-MM-DD HH:mm:ss"
													disabled
												/>
											) : (
												<DatePicker
													format="YYYY-MM-DD"
													allowClear={false}
													disabled={
														type === 'view' ||
														type === 'process'
													}
												/>
											)}
										</Form.Item>
									</Col>
									<Col sm={{span: 24}} />
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="附件上传"
											name="attachmentList">
											<Upload
												{...uploadMoreProps(
													'initiation',
													0,
													fileList,
													(
														t: string,
														flist: any,
														file: any,
													) => {
														if (t === 'sizeBig') {
															const list =
																flist?.filter(
																	(
																		item: any,
																	) =>
																		item.id !==
																		file.id,
																)
															setFileList(
																() => list,
															)
															return false
														}
														if (t === 'error') {
															const list =
																flist?.filter(
																	(
																		item: any,
																	) =>
																		item.id !==
																		file.id,
																)
															setFileList(
																() => list,
															)
														} else if (
															[
																'done',
																'setData',
															].includes(t)
														) {
															setFileList(
																() => flist,
															)
														} else if (
															t === 'remove'
														) {
															const list =
																flist?.filter(
																	(
																		item: any,
																	) =>
																		item.id !==
																		file.id,
																)
															setFileList(
																() => list,
															)
														}
														return true
													},
												)}>
												<Button
													type="primary"
													ghost
													shape="round"
													size="small"
													disabled={
														type === 'view' ||
														type === 'process'
													}>
													请选择文件
												</Button>
											</Upload>
										</Form.Item>
									</Col>
									<Col sm={{span: 24}}>
										<div className="uploadTip">
											附件说明：附件最大支持200M，支持格式：PDF、Word、Excel、JPG、PNG、ZIP、RAR
										</div>
									</Col>
								</Row>
							</Form>
						</Panel>
						{type === 'add' ? (
							<Panel header={customizeHeader('供应商')} key="2">
								<Form
									form={supplierForm}
									name="basic"
									layout="horizontal"
									labelCol={{flex: '100px'}}
									labelAlign="right"
									labelWrap
									initialValues={{remember: true}}
									autoComplete="off">
									<Row gutter={12}>
										<Col
											sm={{span: 24}}
											md={{span: 12}}
											lg={{span: 8}}>
											<Form.Item
												label="供应商名称"
												name="supplierId"
												rules={[{required: true}]}>
												<Select
													showSearch
													placeholder="请选择"
													optionFilterProp="supplierName"
													fieldNames={{
														label: 'supplierName',
														value: 'id',
													}}
													options={supplierList}
													onChange={
														onAccessListChange
													}
												/>
											</Form.Item>
										</Col>
										<Col sm={{span: 24}}>
											<CustomTable
												params={params}
												columns={supplierColumns}
												callback={(pagination: any) => {
													setParams(pagination)
												}}
												loading={false}
												dataSource={supplierView}
											/>
										</Col>
									</Row>
								</Form>
							</Panel>
						) : (
							''
						)}
					</Collapse>
					{type !== 'add' ? (
						<div className={styles.tabs}>
							<Tabs
								type="card"
								defaultActiveKey="1"
								items={[
									{
										label: '供应商信息',
										key: '供应商信息',
										children: (
											<CustomTable
												columns={supplierColumns}
												scroll={{
													x: 'max-content',
													y: 480,
												}}
												callback={() => {}}
												dataSource={supplierView}
											/>
										),
									},
									{
										label: '付款信息',
										key: '付款信息',
										children: (
											<CustomTable
												columns={paymentColumns}
												scroll={{
													x: 'max-content',
													y: 480,
												}}
												callback={() => {}}
												dataSource={paymentrView}
											/>
										),
									},
									{
										label: '操作记录',
										key: '操作记录',
										children: (
											<OperationRecord
												businessId={
													props.location.query?.id
												}
												businessType={33}
											/>
										),
									},
								]}
							/>
						</div>
					) : (
						''
					)}
					<div className={styles.wrap}>
						<Button onClick={goback}>取消</Button>
						{type !== 'view' && type !== 'process' ? (
							<>
								<Button
									type="primary"
									htmlType="submit"
									onClick={() => submit('save')}>
									保存
								</Button>
								<Button
									type="primary"
									htmlType="submit"
									onClick={() => submit('submit')}>
									提交
								</Button>
							</>
						) : null}

						{type === 'process' ? (
							<>
								<Button
									type="primary"
									htmlType="submit"
									onClick={() => {
										onCompleteTask('1')
									}}>
									同意
								</Button>
								<Button
									onClick={() => {
										onCompleteTask('2')
									}}>
									驳回
								</Button>
								<Button
									onClick={() => {
										onCompleteTask('3')
									}}>
									拒绝
								</Button>
							</>
						) : (
							''
						)}
					</div>
				</div>
			</div>
		)
	},
)

export default connect(({global, user}: any) => ({global, user}))(add)
